<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

	<meta charset="utf-8" />
	<title>Metronic | Pages - Blog Post</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/style-metro.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/style.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/style-responsive.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>
	<link href="../media/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<link href="../media/css/jquery.fancybox.css" rel="stylesheet" />
	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->
	<link href="../media/css/blog.css" rel="stylesheet" type="text/css"/>
	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="../media/image/favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">

	<!-- BEGIN HEADER -->
	<jsp:include page="../include/admin_head.jsp"/>
	<!-- END HEADER -->

	<!-- BEGIN CONTAINER -->   
	<div class="page-container row-fluid">
		<!-- BEGIN SIDEBAR -->
		<jsp:include page="../include/admin_sidebar.jsp"/>
		<!-- END SIDEBAR -->
		<!-- BEGIN PAGE -->

		<div class="page-content">
			<!-- BEGIN PAGE CONTAINER-->
			<div class="container-fluid">
				<!-- BEGIN PAGE HEADER-->
				<div class="row-fluid">
					<div class="span12">
						<!-- BEGIN STYLE CUSTOMIZER -->
						<!-- BEGIN PAGE TITLE & BREADCRUMB-->
						<h3 class="page-title">
							
						</h3>
						<ul class="breadcrumb">
							<li>
								<i class="icon-home"></i>
								<a href="#">我的博客</a> 
								<i class="icon-angle-right"></i>
							</li>
							<li>
								<a href="#">博客详情</a>
								<i class="icon-angle-right"></i>
							</li>
						</ul>
						<!-- END PAGE TITLE & BREADCRUMB-->
					</div>
				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid">
					<div class="span12 blog-page">
						<div class="row-fluid">
							<div class="span10 row-fluid" style="margin-left: 30px;">
								<h1 style="text-align: center">${blog.blogTitle}</h1>
								<div class="blog-tag-data">
									
									<div class="row-fluid">
										<div class="span6">
											<ul class="unstyled inline blog-tags">
												<li>

													<i class="icon-tags"></i> 
													<c:forEach var="tag" items="${blog.tagList}">
														<c:out value="${tag.tagName}  " />
													</c:forEach>												
												</li>
											</ul>
										</div>
										<div class="span6 blog-tag-data-inner">
											<ul class="unstyled inline">
												<li><i class="icon-calendar"></i> <a href="#">${blog.blogTime }</a></li>
												<li><i class="icon-comments"></i> <a href="#">${blog.blogTimes }</a></li>
											</ul>
										</div>
									</div>
								</div>
								<!--end news-tag-data-->

								<div>

									${blog.blogContent }
								</div>

								<hr>

								<div class="media">

									<h3>Comments</h3>

									<a href="#" class="pull-left">

									<img alt="" src="media/image/9.jpg" class="media-object">

									</a>

									<div class="media-body">

										<h4 class="media-heading">Media heading <span>5 hours ago / <a href="#">Reply</a></span></h4>

										<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

										<hr>

										<!-- Nested media object -->

										<div class="media">

											<a href="#" class="pull-left">

											<img alt="" src="media/image/5.jpg" class="media-object">

											</a>

											<div class="media-body">

												<h4 class="media-heading">Media heading <span>17 hours ago / <a href="#">Reply</a></span></h4>

												<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

											</div>

										</div>

										<!--end media-->

										<hr>

										<div class="media">

											<a href="#" class="pull-left">

											<img alt="" src="media/image/7.jpg" class="media-object">

											</a>

											<div class="media-body">

												<h4 class="media-heading">Media heading <span>2 days ago / <a href="#">Reply</a></span></h4>

												<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

											</div>

										</div>

										<!--end media-->

									</div>

								</div>

								<!--end media-->

								<div class="media">

									<a href="#" class="pull-left">

									<img alt="" src="media/image/6.jpg" class="media-object">

									</a>

									<div class="media-body">

										<h4 class="media-heading">Media heading <span>July 5,2013 / <a href="#">Reply</a></span></h4>

										<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

									</div>

								</div>

								<!--end media-->

								<hr>

								

							</div>

							<!--end span9-->

							

							<!--end span3-->

						</div>

					</div>

				</div>

				<!-- END PAGE CONTENT-->

			</div>

			<!-- END PAGE CONTAINER--> 

		</div>

		<!-- END PAGE -->    

	</div>

	<!-- END CONTAINER -->

	<!-- BEGIN FOOTER -->

	

	<!-- END FOOTER -->

	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

	<!-- BEGIN CORE PLUGINS -->

	<script src="../media/js/jquery-1.10.1.min.js" type="text/javascript"></script>

	<script src="../media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

	<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

	<script src="../media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      

	<script src="../media/js/bootstrap.min.js" type="text/javascript"></script>

	<!--[if lt IE 9]>

	<script src="media/js/excanvas.min.js"></script>

	<script src="media/js/respond.min.js"></script>  

	<![endif]-->   

	<script src="../media/js/jquery.slimscroll.min.js" type="text/javascript"></script>

	<script src="../media/js/jquery.blockui.min.js" type="text/javascript"></script>  

	<script src="../media/js/jquery.cookie.min.js" type="text/javascript"></script>

	<script src="../media/js/jquery.uniform.min.js" type="text/javascript" ></script>

	<!-- END CORE PLUGINS -->

	<script src="../media/js/app.js"></script>      

	<script>

		jQuery(document).ready(function() {    

		   App.init();
			
		   $("#sidebar > li[title='blogs']").addClass("start active");
		});

	</script>

	<!-- END JAVASCRIPTS -->

<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script></body>

<!-- END BODY -->

</html>